<template>
    <div class="accommodation-registration" :class="!hadRole ? '' : 'accommodation-no-role'">
		<nav-header></nav-header>

        <div class="no-role" v-if="hadRole">
            您暂未分配该宿舍楼权限，请联系超级管理员开通~
        </div>
		<div class="zh-table" v-else v-loading="loading.status" :element-loading-text="loading.txt">
            <div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width" style="width: 145px">
                        <el-select v-model="listParam.dormId" @change="changeDorm" filterable placeholder="请选择宿舍楼">
                            <el-option
                                v-for="item in dormData"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="open-width">
                        <el-input v-model="listParam.keyword" placeholder="输入寝室号" @keyup.enter.native="searchFunc"></el-input>
                    </div>
                    <el-button type="primary" @click="searchFunc">搜索</el-button>
                    <el-button type="primary" @click="resetList">重置</el-button>
                </div>
                <div class="zh-open-right fr">
                    <el-button type="danger" @click="dleteAllConfirm">批量清空</el-button>
                </div>
            </div>

            <div class="zh-table-contents">
                <el-table
                    :data="listData"
                    fixed
                    border
                    max-height="600"
                    @selection-change="tableSelectionChange"
                    style="width: 100%">
                    <el-table-column
                        type="selection"
                        width="50"
                        align="center"
                        fixed>
                    </el-table-column>
                    <el-table-column
                        prop="building_name"
                        label="宿舍楼"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="housemaster_name"
                        label="宿管老师"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="telphone"
                        label="联系电话"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="dormitory_number"
                        label="寝室号"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="student_count"
                        label="住宿情况"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="student_name"
                        label="住宿学生"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="班级"
                        align="center"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span v-if="scope.row.class_name !== '混寝'">{{scope.row.class_name}}</span>
                            <span v-else style="color: #348EFC;cursor:pointer" @click="viewClass(scope.row)">混寝</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        :width="120">
                        <template slot-scope="scope">
                            <el-button @click="goToDorm(scope.row.dormitory_id)" type="text">添加</el-button>
                            <el-button @click="deleteConfirm(scope.row.dormitory_id)" type="text" class="delete-button">清空</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="table-pagination" v-show="totalNumber > 10">
                    <el-pagination
                        @size-change="setCurrentSize"
                        @current-change="setCurrentPage"
                        :current-page="listParam.pageIndex"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="listParam.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalNumber">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-dialog 
            title="混寝" 
            :visible.sync="classVisible" 
            class="mixed-bed-manage" 
            width="600px" 
            :close-on-click-modal="false">
             <el-table
                :data="classData"
                fixed
                border
                style="width: 100%">
                <el-table-column
                    prop="user_number"
                    label="账号"
                    align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="user_name"
                    label="姓名"
                    align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="bed_number"
                    label="床位"
                    align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="class_name"
                    label="班级"
                    align="center"
                    show-overflow-tooltip>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            hadRole: true,
            classVisible: false, // 班级弹窗
            rowLen: 0, // 选中的长度
            totalNumber: 0, // 列表总条数
            selected: [], // 表格选中数组
            dormData: [], // 宿管列表
            classData: [], // 混寝列表
            listData: [], // 住宿列表
            loading: { // 数据加载状态
                status: false,
                txt: '获取数据...'
            },
            listParam: {
                keyword: '',
                dormId: '',
                pageIndex: 1,
                pageSize: 10
            }
        }
    },
    mounted() {
        this.getUserRole();
    },
    beforeDestroy() {
        sessionStorage.removeItem('ldarId');
    },
    methods: {
        /**
         * 根据用户角色权限获取宿舍楼
         */
        getUserRole() {
            let success = (res => {
                if (!is_empty(res.data)) {
                    this.dormData = res.data;
                    this.hadRole = false;
                    
                    if (sessionStorage.getItem('ldarId')) {
                        this.listParam.dormId = +sessionStorage.getItem('ldarId');
                        sessionStorage.removeItem('ldarId');
                    } else {
                        this.listParam.dormId = res.data[0].id;
                    }

                    this.getList();
                } else {
                    if (this.$g.role_id.includes(1) || this.$g.role_id.includes(2)) {
                        this.hadRole = false;
                    } else {
                        this.hadRole = true;
                    }
                }
            })

            this.$ajax.get('api/dormitory/getdormitoryBuildingByUser',{params: {user_id: this.$g.user_id}, func:{success: success}});
        },
        /**
         * 切换宿舍楼
         */
        changeDorm(val) {
            this.listParam = {
                keyword: '',
                dormId: val,
                pageIndex: 1,
                pageSize: 10
            }

            this.getList();
        },
        /**
         * 获取住宿管理列表
         */
        getList() {
            let success = (res=>{
                this.loading.status = false;
                this.listData = res.data.data;
                this.totalNumber = res.data.data_sum;
            })

            this.loading.status = true;
            let params = {
                building_id: this.listParam.dormId,
                keyword: this.listParam.keyword,
                page_index: this.listParam.pageIndex,
                page_size: this.listParam.pageSize
            }

            this.$ajax.get('api/dormitory/dormitoryRegistration',{params: params, func:{success: success}})
        },
        /**
         * 搜索列表
         */
        searchFunc() {
            this.listParam.pageIndex = 1;
            this.getList();
        },
        /**
         * 重置搜索条件
         */
        resetList() {
            this.listParam.keyword = '';
            this.listParam.pageIndex = 1;
            this.listParam.pageSize = 10;

            this.getList();
        },
        /**
         * 批量清空
         */
        dleteAllConfirm() {
            if(this.selected.length === 0) {
                this.$message.warning("请选择要清空的项");
                return false;
            }

            let yes = (res => {
                let ids = [];
                this.rowLen = this.selected.length;

                this.selected.forEach(item => {
                    ids.push(item.dormitory_id);
                })

                this.deleteList(ids);
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '确定要清空这些项吗？'});
        },
        /**
         * 删除记录
         * @param {Number} id 记录 id
         */
        deleteConfirm(id) {
            let yes = (res => {
                this.rowLen = 1;
                this.deleteList(id);
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '确定要清空该记录吗？'});
        },
        /**
         * 删除数据
         * @param {String} id 删除的 id
         */
        deleteList(id) {
            this.loading.status = true;

            let success = (res => {
                this.$message.success(res.msg);
                
                if (this.listData.length - this.rowLen === 0) {
                    if (this.listParam.pageIndex > 1) {
                        this.listParam.pageIndex-- ;
                    } else {
                        this.listParam.pageIndex = 1;
                    }
                }

                this.getList();
            });
            let fail = (res =>{
                this.$message.error(res.msg);

                this.getList();
            }) 

            this.$ajax.delete('api/dormitory/dormitoryRegistration', {params: {id}, func: {success: success, fail: fail}})
        },
        /**
         * 查看混寝
         * @param {Object} obj 记录信息
         */
        viewClass(obj) {
            this.classVisible = true;
            const success = (res => {
                this.classData = res.data;
            })
            let params = {
                dormitory_id: obj.dormitory_id,
                data_type: 1
            }

            this.$ajax.get('api/dormitory/dormitoryUser', {params: params, func: {success: success}})
        },
        /**
         * 跳到宿舍列表页
         * @param {Number} id 记录 id
         */
        goToDorm(id) {
            this.$router.push('/life/dormitory/registration-detail/' + id);
        },
        /**
         * 列表数据多选
         * @param {Array} val 选中数据的数组
         */
        tableSelectionChange(val) {
            this.selected = val;
        },
        /**
         * 设置每页列表的数量
         * @param {Number} val 每页数据条数
         */
        setCurrentSize(val) {
            this.listParam.pageIndex = 1;
            this.listParam.pageSize = val;

            this.getList();
        },
        /**
         * 设置当前列表的页数
         * @param {Number} val 页数
         */
        setCurrentPage(val) {
            this.listParam.pageIndex = val;

            this.getList();
        },
    },
}
</script>

<style lang="scss">
    .accommodation-registration {
        .el-dialog__body {
            padding-bottom: 30px;
        }

        .mixed-bed-manage {
            .el-dialog__body {
                padding-bottom: 30px;
            }
        }
    }

    .accommodation-no-role {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;

        .no-role {
            font-size: 20px;
        }
    }
</style>